<template>
	<view class="wrap">
		<u-navbar title="设置头像、昵称" :isBack="false"/>
		<view class="avatar" :class="{empty:!avatar}" @tap="chooseCover">
			<image class="pic"
				v-if="avatar"
				:src="avatar"
				mode="aspectFill">
			</image>
			<view class="place">
				<view class="icon iconfont icon-camerafill"/>
				<text class="u-text-center" >\n上传设置头像\n</text>
			</view>
			<view class="camera iconfont icon-camerafill"></view>
		</view>
		<input class="input" type="text" maxlength="10" v-model="name" placeholder="输入您要设置的昵称" placeholder-class="placeholder"/>
		<view class="tip">
			<view>
				昵称长度最少设置2个中文文字起。
			</view>
			<view class="">
				设置好 （头像 + 昵称），点击完成即可注册成功。
			</view>
		</view>
		<view class="next u-m-t-50" :class="{disable:!canNext}" @tap="next">
			完成
		</view>
	</view>
</template>

<script>
	import { uploadFile } from "@/utils/file.js"
	import { delay, goback, jumpTo, toast } from "@/utils/util";
	import { modifyUser } from "@/api/user";
	import { getStringByte } from "@/utils/check";
	export default {
		data() {
			return {
				token:'',
				avatar:null, 
				avatarUrl:null,
				uploading:false,
				name:'', 
				lock:false,
				eventChannel:null
			};
		},
		computed:{
			byte(){
				return getStringByte(this.name)
			},
			canNext(){
				// return !!this.avatarUrl&&this.byte>=4
				return this.byte>=4
			}
		},
		onLoad({token}) {
			this.token = token
			this.eventChannel = this.getOpenerEventChannel();
		},
		onBackPress({from}) {
			return from=='backbutton'
		},
		methods:{
			async chooseCover(){
				uni.$off("uAvatarCropper")
				let file = await new Promise((resolve,reject)=>{
					uni.$once("uAvatarCropper",resolve)
					jumpTo("/uview-ui/components/u-avatar-cropper/u-avatar-cropper?destWidth=600&rectWidth=240&fileType=jpg")
				})
				const backup = this.avatar
				this.avatar = file
				try{
					this.uploading = true
					this.avatarUrl = await uploadFile({pre:'head/',file},{token:this.token})
				}catch(e){
					this.avatar = backup
					toast('上传失败')
				}finally{
					this.uploading = false
				}
			},
	async next() {
	    if (this.uploading) {
	        return toast('头像正在上传,请稍等')
	    }
	    if (!this.canNext || this.lock) {
	        return
	    }
	    try {
	        this.lock = true
	
	        // 如果用户没有设置头像，使用默认头像
	        let finalAvatarUrl = this.avatarUrl
	        if (!finalAvatarUrl) {
	            finalAvatarUrl = 'http://39.107.113.181:9002/tmp/2025/07/18/b7ed8f01fc824fcf91e99794715af7ff.png'
	        }
	
	        // 设置昵称（最少两个中文字）
	        if (this.byte < 4) {
	            toast('昵称最少两个中文字')
	            return
	        }
	
	        // 调用接口更新用户信息
	        await modifyUser({
	            userName: this.name,
	            avatarUrl: finalAvatarUrl
	        }, { token: this.token })
	
	        uni.showToast({ title: "提交成功" })
	
	        // 通知登录页设置完成
	        this.eventChannel.emit('successful', {
	            userName: this.name,
	            avatarUrl: finalAvatarUrl
	        })
	
	        uni.reLaunch({
	            url: '/pages/index/index'
	        })
	
	    } finally {
	        this.lock = false
	    }
	}
		}
	}
</script>
<style>
	page{
		background-color: #FFFFFF;
	}
</style>
<style lang="scss" scoped>
	.wrap{
		display: flex;
		flex-direction: column;
	}
	.input{
		width: 650rpx;
		height: 130rpx;
		padding: 0 30rpx;
		border-radius: 20rpx;
		border: 4rpx solid #000000;
		font-size: 34rpx;
	}
	.next{
		font-size: 36rpx;
		font-weight: bold;
		width: 340rpx;
		height: 90rpx;
		border-radius: 200rpx;
		background-color: $theme-color;
		color: #000000;
		display: flex;
		align-items: center;
		justify-content: center;
		&.disable{
			background-color: #F0F0F0;
			color: #AAAAAA;
		}
	}
	.avatar{
		margin-top: 150rpx;
		width: 300rpx;
		height: 300rpx;
		position: relative;
		align-self: center;
		transform: scale(0.9);
		&.empty{
			.camera{
				display: none;
			}
			.place{
				display: flex;
			}
		}
		.pic {
			width: 100%;
			height: 100%;
			border-radius: 50%;
		}
		.camera {
			width: 25%;
			height: 25%;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 50rpx;
			background-color: $theme-color;
			border-radius: 50%;
			position: absolute;
			right: 0rpx;
			bottom: 0rpx;
		}
		.place{
			width: 100%;
			height: 100%;
			border-radius: 50%;
			background-color: #F7F7F7;
			display: none;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			color: $u-tips-color;
			.icon{
				font-size: 100rpx;
			}
		}
	}
	.input{
		margin-top: 60rpx;
		align-self: center;
	}
	.placeholder{
		color: #AAAAAA;
	}
	.tip{
		align-self: center;
		font-size: 28rpx;
		color: #AAAAAA;
		margin-top: 20rpx;
	}
	.next{
		align-self: center;
	}
</style>
